<template>
	<scroll-view :style="{height: height + 'px'}" class="emoji" :class="{show}" scroll-y>
		<view class="emoji-wrapper flex-flow">
			<view @tap="select(emoji)" class="emoji-item flex-column" v-for="(emoji, index) in emojis" :key="index">{{ emoji }}</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import emojiList from './emoji'

const emojis = ref(emojiList)
const emit = defineEmits(['select'])
const height = ref(uni.getStorageSync('uni_keyboard_height') || '260')
const props = defineProps({
	show: { type: Boolean, default: false }
})

function select(emoji: string) {
	emit('select', emoji)
}
</script>

<style lang="scss" scoped>
.emoji {
	height: 300px;
	opacity: 0;
	transition: opacity 0.2s ease;
	
	&.show {
		opacity: 1;
	}
	
	&-wrapper {
		padding: 0 20rpx 20rpx;
		
		.emoji-item {
			height: 80rpx;
			font-size: 48rpx;
			width: calc(100% / 8);
			border-radius: 6rpx;
		
			&:active {
				background-color: #e5e5e5;
			}
		}
	}
}
</style>